iOS UIView 和 CALayer 详解

在视图展示的过程中 UIView 和 CALayer 所起到的作用不言而喻，从控件相关的继承关系上来详细看下两者具体的实现过程。

UIView 的主要功能：

  • 绘图和动画 (Drawing and animation)
  • 实现布局和视图管理 (Layout and subview management)
  • 点击事件的处理 (Event handling)

CALyer 的主要功能：

  • 视图绘制
  • 动画效果

UIView详解

UIView 的继承关系

下面是 UIView 在类中实现的继承关系图谱：

1
UIView : UIResponder : NSObject

由上图我们可以看出 UIView 继承自 UIResponder 最终继承来自 NSObject的基本类，我们可以实例 UIView 调用相关的功能。

UIView 的绘制和动画

实现图像绘制

在 UIView 中支持我们在其中进行视图的绘制，在使用 Graphices 可以在 UIView 中进行相关绘制具体图形。

代码实现如下（在 UIView 实现实例方法）：

(1) 在 UIView 的子类中实现绘制

1
2
3
4
5
6
7
8
- (void) drawRect: (CGRect) rect { 
//绘制椭圆图图形
UIBezierPath *p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; 
//填充颜色
[[UIColor blueColor] setFill]; 
//颜色设置
[p fill]; 
}

(2) 使用 Core Graphics 进行绘制

1
2
3
4
5
6
7
8
9
10
- (void) drawRect: (CGRect) rect { 
//获取当前上下文
CGContextRef con = UIGraphicsGetCurrentContext(); 
//添加椭圆绘制坐标 
CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100)); 
//对绘制内容颜色填充 
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor); 
//实现路径绘制 
CGContextFillPath(con); 
}

动画实现

(1)动画的操作 API

1
2
3
4
5
6
7
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0);
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindof UIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

（2）动画的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
//动画实现方式一：
NSTimeInterval duration = 0.5f;//设置动画持续时间
[UIView animateWithDuration:duration animations:^{
   //添加动画实现的具体操作  
}];

//动画实现方式二：
NSTimeInterval duration = 0.5f;
[UIView animateWithDuration:duration animations:^{
   //添加动画实现
} completion:^(BOOL finished) {
   //动画操作完成操作   
}];

实现布局和视图管理

在视图展示的过程中我们要根据屏幕的大小来对视图相关大小、位置和相对坐标进行适配， UIView 在界面内容展示时配置的主要实现步骤。

当我们手写代码来完成视图相关组合和所有视图管理中，可在 UIViewController 的 View 中进行添加。

1
2
3
4
CGRect headRect = CGRectMake(20, 20, 60, 60);
UIImageView *headPhoto = [[UIImageView alloc] initWithFrame:headRect];
    
[self.view addSubview:headPhoto];

上面代码实现 ImageView 在UIViewController 的 View 中进行添加。

对视图的操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (void)removeFromSuperview;//从父视图移除
- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index;//在低级层添加view
- (void)exchangeSubviewAtIndex:(NSInteger)index1 withSubviewAtIndex:(NSInteger)index2;//对 index1 和 index2 位置的视图进行交换

- (void)addSubview:(UIView *)view;//添加视图
- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview;//在siblingSubview后面添加视图view
- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;////在siblingSubview上面添加视图view

- (void)bringSubviewToFront:(UIView *)view;//把视图挪到 view 上
- (void)sendSubviewToBack:(UIView *)view;//把视图挪到 view 下面

- (void)didAddSubview:(UIView *)subview;//添加视图
- (void)willRemoveSubview:(UIView *)subview;//将要移除视图

- (void)willMoveToSuperview:(nullable UIView *)newSuperview;//挪到父类视图等级
- (void)didMoveToSuperview;//挪动父类视图等级
- (void)willMoveToWindow:(nullable UIWindow *)newWindow;//挪到新的视图窗口
- (void)didMoveToWindow;//完成新窗口视图挪移

- (BOOL)isDescendantOfView:(UIView *)view;//
- (nullable __kindof UIView *)viewWithTag:(NSInteger)tag;//更具视图 tag 获取视图

在 UIView 中可以添加系列的视图来形成视图树，也可以通过一些相关的 API 来对其中的视图进行系列操作。

点击事件处理

在 UIView 中可以实现事件处理的机制，目前有手势识别

(1)手势识别

下面给出使用代码：

1
2
3
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector()];
    
[self.view addGestureRecognizer:panGesture];

上面代码是实现在视图控制器的 View 上面添加手势识别。当然还有其他中手势识别的类型如下：

1
2
3
4
5
6
UIPanGestureRecognizer : UIGestureRecognizer
UISwipeGestureRecognizer : UIGestureRecognizer 
UITapGestureRecognizer : UIGestureRecognizer
UIPinchGestureRecognizer : UIGestureRecognizer
UIRotationGestureRecognizer : UIGestureRecognizer
UIScreenEdgePanGestureRecognizer : UIPanGestureRecognizer

CALayer 详解

CALayer 继承关系

下面给出 CALayer 的继承关系：

1
CALayer : NSObject <NSSecureCoding, CAMediaTiming>

从上面可以看出 CALayer 是继承与 NSObject 类的实现，对比 UIView 继承与 UIResponder : NSObject 两者实现。

CALayer 视图绘制

(1)使用 CALayer 直接绘制

代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//自定义图层
CALayer *layer=[[CALayer alloc]init];
layer.bounds=CGRectMake(0, 0, 100, 100);
layer.position=CGPointMake(160, 200);
layer.backgroundColor=[UIColor redColor].CGColor;
layer.cornerRadius=100/2;
//注意仅仅设置圆角，对于图形而言可以正常显示，但是对于图层中绘制的图片无法正确显示
//如果想要正确显示则必须设置masksToBounds=YES，剪切子图层
layer.masksToBounds=YES;
//阴影效果无法和masksToBounds同时使用，因为masksToBounds的目的就是剪切外边框，
//而阴影效果刚好在外边框
//设置边框
layer.borderColor=[UIColor whiteColor].CGColor;
layer.borderWidth=2;
//设置图层代理
layer.delegate=self;
//添加图层到根图层
[self.view.layer addSublayer:layer];
//调用图层setNeedDisplay,否则代理方法不会被调用
[layer setNeedsDisplay];

CALayer 动画

使用 CALayer 实现综合动画

1
2
3
4
5
6
7
8
CGAffineTransform transform = CGAffineTransformIdentity; 
//缩放为原来的 50%
transform = CGAffineTransformScale(transform, 0.5, 0.5); 
//进行旋转 30 度
transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0); 
//平移 200 像素
transform = CGAffineTransformTranslate(transform, 200, 0);
self.layerView.layer.affineTransform = transform;

参考地址：

UIView
CALayer

扫一扫，分享到微信

微信分享二维码
iOS 开发者<br><br>一位拥有梦想，脚踏实地的 90 后<br> <br>Good luck~